<template>
    <div class="main">
        <div>
            <el-row :gutter="20">
                <el-col  :sm="8" :md="8" :lg="8" :xl="8">
                    <div class="box-bg">
                        <div class="elicon">
                            <el-icon :size="40" color="#40C9C6">
                                <Grid />
                            </el-icon>
                            <div class="hidden-md-only hidden-sm-only hidden-xs-only">
                                <div>商品数量</div>
                                <count-to :startVal="0" :endVal="quantity" :duration="3000"></count-to>
                            </div>
                        </div>
                        <div class="elicon">
                            <el-icon :size="40" color="#36A3F7">
                                <ChatDotSquare />
                            </el-icon>
                            <div class="hidden-md-only hidden-sm-only hidden-xs-only">
                                <div>未发货单</div>
                                <count-to :startVal="0" :endVal="waitStockCount" :duration="3000"></count-to>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col  :sm="16" :md="16" :lg="16" :xl="16" style="margin-top: 30px;">
                    <div  id="columnChart" ref="column" />
                </el-col>
            </el-row>
        </div>
        <div>
            <el-row :gutter="20">
                <el-col  :sm="24" :md="24" :lg="10" :xl="8">
                    <div  id="lineChart" ref="line" />
                </el-col>
                <el-col  :sm="24" :md="12" :lg="7" :xl="8">
                    <div id="areaChart" ref="areas" hidden-md-and-down hidden-md-only hidden-md-and-up  />
                </el-col>
                <el-col  :sm="24" :md="12" :lg="7" :xl="8">
                    <div  id="channelChart" ref="channels" />
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script  setup lang="ts">
import 'element-plus/theme-chalk/display.css'
import { Grid, ChatDotSquare } from '@element-plus/icons-vue';
import { post } from "@/utils/http";
import { ref} from 'vue';
import * as echarts from 'echarts';
import { CountTo } from 'vue3-count-to';
const quantity = ref()        //商品数量
const waitStockCount = ref()  //未发货单
type EChartsOption = echarts.EChartsOption


const loadCateGory = () => {
    let data = {
        _gp: 'admin.dashboard',
        _mt: 'integral',
    }
    post(data).then(res => {
        console.log(res.data)
        let { daysOrder, daysSum,area,channel} = res.data
        quantity.value = res.data.goodsCount
        waitStockCount.value = res.data.waitStockCount
        //柱形图
        let columnChart = document.getElementById('columnChart')!;
        let column = echarts.init(columnChart)
        //折线图
        let lineChart = document.getElementById('lineChart')!;
        let line = echarts.init(lineChart)
        //饼状图地区
        let areaChart = document.getElementById('areaChart')!;
        let areas = echarts.init(areaChart)
        //饼状图类型
        let channelChart = document.getElementById('channelChart')!;
        let channels = echarts.init(channelChart)
        //柱形图
        let columnOption: EChartsOption = {
            title: {
                text: '七日订单', //主标题文本
                left: 'left',  //文字左边对齐
            },
            grid: {
                right: '15%', //组件离容器右侧的距离
                left: '15%' //组件离容器左侧的距离
            },
            xAxis: {
                type: 'category', //坐标轴类型
                data: daysOrder[0],
                axisTick: {
                    show: false,//显示刻度线
                },
                axisLabel: {
                    fontSize: 10, //字体大小
                    interval: 0, //横轴信息全部显示，必须设置
                }
            },
            yAxis: {
                name: '订单数', //坐标轴名称。
                type: 'value' //数值轴，适用于连续数据。
            },
            legend: {
                left: 'right',  //组件离容器左侧的距离。
                data: ['订单数'],
            },
            series: [
                {
                    data: daysOrder[1],   //数据
                    type: 'bar',
                    name: '订单数',
                    color: '#00b4fe',  //柱子颜色
                    barWidth: '40%'  //柱子大小
                }
            ],
        };
        //折线图
        let lineOption: EChartsOption = {
            title: {
                text: '7日成交金额', //主标题文本
                left: 'left',  //文字左边对齐
            },
            grid: {
                right: '15%', //组件离容器右侧的距离
                left: '15%' //组件离容器左侧的距离
            },
            xAxis: {
                type: 'category', //坐标轴类型
                data: daysSum[0],
                axisTick: {
                    show: false,//显示刻度线
                },
                axisLabel: {
                    fontSize: 14, //字体大小
                }
            },
            yAxis: {
                name: '订单数', //坐标轴名称。
                type: 'value' //数值轴，适用于连续数据。
            },
            legend: {
                left: 'right',  //组件离容器左侧的距离。
                data: ['订单数'],
            },
            series: [
                {
                    data: daysSum[1],   //数据
                    type: 'line',
                    name: '订单数',
                    color: '#55b0a7',  //折线颜色
                }
            ],
        };
        //饼状图地区
        let  areaOption = {
            title: {
                text: '订单地区分布', //文字标题文本
                left: 'left'  //文字左边对齐
            },
            tooltip: {    //触发类型
                trigger: 'item'  //数据项图形触发
            },
            legend: {
                left: 'right',  //组件离容器左侧的距离。
                data: ['地区分布'], //图例的数据数组---数组项通常为一个字符串，每一项代表一个系列的 name
            },
            series: [
                {
                    name: '地区分布', //系列名称--用于tooltip的显示
                    type: 'pie',  //图形的类型--饼图
                    radius: '50%', //饼图的半径
                    data:area, //系列中的数据内容数组
                    emphasis: { //高亮状态的扇区和标签样式。
                        itemStyle: {
                            shadowBlur: 10,//图形阴影的模糊大小
                            shadowOffsetX: 0, //阴影水平方向上的偏移距离。
                            shadowColor: 'rgba(0, 0, 0, 0.5)' //阴影颜色
                        }
                    }
                }
            ]
        };
         //饼状图类型
         let  channelOption = {
            title: {
                text: '订单渠道分布', ////文字标题文本
                left: 'left' //文字左边对齐
            },
            tooltip: {  //触发类型
                trigger: 'item' //数据项图形触发
            },
            series: [
                {
                    type: 'pie', //图形的类型--饼图
                    radius: '50%',  //饼图的半径
                    data:channel,//系列中的数据内容数组
                    emphasis: {  //高亮状态的扇区和标签样式。
                        itemStyle: {
                            shadowBlur: 10,//图形阴影的模糊大小
                            shadowOffsetX: 0,//阴影水平方向上的偏移距离。
                            shadowColor: 'rgba(0, 0, 0, 0.5)' //阴影颜色
                        }
                    }
                }
            ]
        };
        columnOption && column.setOption(columnOption)
        lineOption && line.setOption(lineOption)
        areaOption && areas.setOption(areaOption)
        channelOption && channels.setOption(channelOption)
        window.onresize = function() {
        // echarts图表自适应resize方法
            column.resize();
            line.resize();
            areas.resize();
            channels.resize();
    };
    })

}

loadCateGory()

</script>
<style  lang="less" scoped>
.box-bg {
    height: 340px;
    padding-left: 40px;
    margin: auto;
    .elicon {
        width: 60%;
        height: 90px;
        padding: 0px 20px;
        margin-top: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0px 0px 20px 0px #e3e2e2;
    }
}

// 柱形图
#columnChart {
    width: 80%;
    margin: auto;
    height: 340px;
}

// 折线图
#lineChart {
    width: 100%;
    height: 300px;
}

 //饼状图地区
#areaChart {
  width: 100%;
  height: 300px;
}
//饼状图类型
#channelChart {
  width: 100%;
  height: 300px;
}
.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
    background-color: #ccc;
}
</style>